<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力中小企业发展 
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdadmin.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德代驾系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.wdadmin.cn
+----------------------------------------------------------------------
| 订单详情 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<page-meta :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"></page-meta>
	<view class="container flex-column" :style="{'--theme-color': themeColor}" v-if="loadEnd">
		<view class="container-map flex-item">
			<map id="map" class="map-box" :latitude="orderInfo.from_lat" :longitude="orderInfo.from_lng" :markers="showMarkers" :polyline="polyline" @regionchange="regionchange">
				<cover-view slot="callout" class="map-callout">
					<template v-if="orderInfo.state == 'pending'">
						<cover-view class="callout-address" :marker-id="1">
							<cover-view class="address-name">{{orderInfo.from_address}}</cover-view>
						</cover-view>
						<cover-view class="callout-address" :marker-id="2">
							<cover-view class="address-name">{{orderInfo.to_address}}</cover-view>
						</cover-view>
					</template>
					<template v-else-if="orderInfo.state == 'accepted' && orderInfo.driver_arrive_status == 'not_arrived'">
						<cover-view class="callout-address" :marker-id="4">
							<cover-view class="address-name">距离{{orderInfo.distance}}</cover-view>
						</cover-view>
					</template>
					<template v-else-if="orderInfo.state == 'accepted' && orderInfo.driver_arrive_status == 'arrived'">
						<cover-view class="callout-box" :marker-id="6">
							<cover-view class="box-title">司机已到达指定地点</cover-view>
							<cover-view class="box-subtitle">请尽快上车</cover-view>
						</cover-view>
					</template>
					<template v-else-if="orderInfo.state == 'in_progress'">
						<cover-view class="callout-distance" :marker-id="7">
							<cover-view class="distance-text">全程{{orderInfo.distance}}</cover-view>
						</cover-view>
					</template>
				</cover-view>
			</map>
			<view class="map-operate flex align-items-center" v-if="iconShield" @click="toSecurity()">
				<view class="background"></view>
				<view class="icon" :style="{'background-image': 'url('+ iconShield +')'}"></view>
				<text class="text">安全中心</text>
			</view>
		</view>
		<view class="container-main">
			<!-- 待接单 -->
			<view class="main-content" v-if="orderInfo.state == 'pending'">
				<view class="content-column mt-0 flex align-items-center">
					<view class="column-info flex-item">
						<view class="info-title">预计<text :style="{color: themeColor}">{{orderInfo.estimated_time}}</text>应答</view>
						<view class="info-subtitle">正在全力为您寻找代驾师傅</view>
					</view>
					<view class="column-btn" @click="handleCancel()">取消订单</view>
				</view>
				<view class="content-input flex align-items-center" v-if="orderInfo.passenger_info && orderInfo.passenger_info.mobile">
					<view class="title">替TA代叫</view>
					<view class="value">
						<text v-if="orderInfo.passenger_info.name">{{orderInfo.passenger_info.name}}</text>
						<text>{{orderInfo.passenger_info.mobile}}</text>
					</view>
				</view>
				<view class="content-input flex align-items-start" v-if="orderInfo.remarks">
					<view class="title">备注信息</view>
					<view class="value">{{orderInfo.remarks}}</view>
				</view>
			</view>
			<!-- 已接单 -->
			<view class="main-content" v-else-if="orderInfo.state == 'accepted'">
				<view class="content-tips mt-0" v-if="orderInfo.driver_arrive_status == 'not_arrived'">
					<view class="tips-title">代驾师傅正在赶来</view>
					<view class="tips-subtitle" v-if="freeCancelTime == -1">已超出免费取消时间，取消订单将扣除部分费用</view>
					<view class="tips-subtitle" v-else-if="freeCancelTime">可在规定时间内免费取消订单<text class="text">（倒计时{{freeCancelTime}}）</text></view>
					<view class="tips-subtitle" v-else>代驾师傅正在努力赶往出发地，请您耐心等待</view>
				</view>
				<view class="content-tips mt-0" v-else>
					<view class="flex align-items-center">
						<text class="tips-title">代驾师傅已到达出发地</text>
						<view class="tips-time flex align-items-center" v-if="waitingTime">
							<view class="time-bg" :style="{background: themeColor}"></view>
							<text class="time-text" :style="{color: themeColor}">等待时间</text>
							<text class="time-value" :style="{color: themeColor}">{{waitingTime}}</text>
						</view>
					</view>
					<view class="tips-subtitle">代驾师傅已到达上车地点，请尽快上车</view>
				</view>
				<view class="content-card flex align-items-center">
					<view class="card-info flex-item">
						<view class="info-name text-ellipsis">{{orderInfo.driver_info.name}}</view>
						<view class="info-tag text-ellipsis">接单数量：{{orderInfo.driver_info.acceptance_number}}单</view>
					</view>
					<image class="card-avatar" :src="orderInfo.driver_info.avatar" mode="aspectFill"></image>
				</view>
				<view class="content-menu flex justify-content-between" v-if="orderInfo.driver_arrive_status == 'not_arrived'">
					<view class="menu-item" @click="handleCancel()">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/cancel.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">取消订单</text>
					</view>
					<view class="menu-item" @click="sendMessage()">
						<view class="item-icon">
							<image class="icon" src="/static/document.png" mode="aspectFit"></image>
							<view class="point" v-if="parseInt(orderInfo.unread_count) > 0"></view>
						</view>
						<text class="item-text">发消息</text>
					</view>
					<view class="menu-item" @click="onContact()">
						<view class="item-icon">
							<image class="icon" src="/static/phone.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">拨打电话</text>
					</view>
					<!-- 	<view class="menu-item">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/share.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">行程分享</text>
					</view> -->
					<view class="menu-item alarm" @click="toAlarm()">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/alarm.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">110报警</text>
					</view>
				</view>
				<view class="content-menu flex justify-content-between" v-else>
					<view class="menu-item" @click="handleCancel()">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/cancel.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">取消订单</text>
					</view>
					<view class="menu-item alarm" @click="toAlarm()">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/alarm.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">110报警</text>
					</view>
					<view class="menu-item" @click="onContact()">
						<view class="item-icon">
							<image class="icon" src="/static/phone.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">拨打电话</text>
					</view>
					<!-- <view class="menu-item">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/share.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">行程分享</text>
					</view> -->
					<view class="menu-item" @click="sendMessage()">
						<view class="item-icon">
							<image class="icon" src="/static/document.png" mode="aspectFit"></image>
							<view class="point" v-if="parseInt(orderInfo.unread_count) > 0"></view>
						</view>
						<text class="item-text">发消息</text>
					</view>
				</view>
				<view class="content-input flex align-items-center" v-if="orderInfo.passenger_info && orderInfo.passenger_info.mobile">
					<view class="title">替TA代叫</view>
					<view class="value">
						<text v-if="orderInfo.passenger_info.name">{{orderInfo.passenger_info.name}}</text>
						<text>{{orderInfo.passenger_info.mobile}}</text>
					</view>
				</view>
				<view class="content-input flex align-items-start" v-if="orderInfo.remarks">
					<view class="title">备注信息</view>
					<view class="value">{{orderInfo.remarks}}</view>
				</view>
			</view>
			<!-- 行程中 -->
			<view class="main-content" v-else-if="orderInfo.state == 'in_progress'">
				<view class="content-driver mt-0 flex align-items-center">
					<image class="driver-avatar" :src="orderInfo.driver_info.avatar" mode="aspectFill"></image>
					<view class="driver-info flex-item">
						<view class="info-name text-ellipsis">{{orderInfo.driver_info.name}}</view>
						<view class="info-tag text-ellipsis">接单数量：{{orderInfo.driver_info.acceptance_number}}单</view>
					</view>
					<view class="driver-price">合计<text class="text">{{orderInfo.actual_amount}}</text>元</view>
				</view>
				<view class="content-menu flex justify-content-around">
					<view class="menu-item alarm" @click="toAlarm()">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/alarm.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">110报警</text>
					</view>
					<!-- <view class="menu-item">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/share.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">行程分享</text>
					</view> -->
					<button class="menu-item clear" open-type="contact">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/service.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">平台客服</text>
					</button>
				</view>
				<view class="content-order">
					<view class="order-group flex align-items-center">
						<view class="group-point" style="background: #242629;"></view>
						<view class="group-text flex-item">{{orderInfo.from_address}}</view>
					</view>
					<view class="order-group flex align-items-center">
						<view class="group-point" style="background: #F9602E;"></view>
						<view class="group-text flex-item">{{orderInfo.to_address}}</view>
					</view>
					<view class="order-time">{{orderInfo.departure_time}}</view>
				</view>
				<view class="content-input flex align-items-center" v-if="orderInfo.passenger_info && orderInfo.passenger_info.mobile">
					<view class="title">替TA代叫</view>
					<view class="value">
						<text v-if="orderInfo.passenger_info.name">{{orderInfo.passenger_info.name}}</text>
						<text>{{orderInfo.passenger_info.mobile}}</text>
					</view>
				</view>
				<view class="content-input flex align-items-start" v-if="orderInfo.remarks">
					<view class="title">备注信息</view>
					<view class="value">{{orderInfo.remarks}}</view>
				</view>
			</view>
			<!-- 待补差/退款中 -->
			<view class="main-content" v-else-if="orderInfo.state == 'awaiting_payment' || orderInfo.state == 'refunded'">
				<view class="content-tips mt-0">
					<view class="tips-title">已到达目的地</view>
					<view class="tips-subtitle" v-if="orderInfo.state == 'awaiting_payment'">已到达目的地点，请尽快支付金额</view>
					<view class="tips-subtitle" v-else-if="orderInfo.state == 'refunded'">多余费用将于三个工作日退回您的账户</view>
				</view>
				<view class="content-driver flex align-items-center">
					<image class="driver-avatar" :src="orderInfo.driver_info.avatar" mode="aspectFill"></image>
					<view class="driver-info flex-item">
						<view class="info-name text-ellipsis">{{orderInfo.driver_info.name}}</view>
						<view class="info-tag text-ellipsis">接单数量：{{orderInfo.driver_info.acceptance_number}}单</view>
					</view>
					<button class="driver-btn clear" open-type="contact">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/service.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">平台客服</text>
					</button>
				</view>
				<view class="content-amount">
					<view class="amount-header flex flex-between-center">
						<view class="header-title">费用合计</view>
						<view class="header-btn flex flex-center" @click="toInvoice()" v-if="orderInfo.state == 'refunded'">
							<image class="icon" src="/static/passenger/invoice.png" mode="aspectFit"></image>
							<text class="text">开发票</text>
						</view>
					</view>
					<view class="amount-info flex-column align-items-center">
						<view class="info-price"><text class="text">{{orderInfo.actual_amount}}</text>元</view>
						<view class="info-btn flex flex-center" @click="openCostInquiry">
							<text class="text">费用疑问</text>
							<image class="icon" src="/static/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="content-input flex align-items-center" v-if="orderInfo.passenger_info && orderInfo.passenger_info.mobile">
					<view class="title">替TA代叫</view>
					<view class="value">
						<text v-if="orderInfo.passenger_info.name">{{orderInfo.passenger_info.name}}</text>
						<text>{{orderInfo.passenger_info.mobile}}</text>
					</view>
				</view>
				<view class="content-input flex align-items-start" v-if="orderInfo.remarks">
					<view class="title">备注信息</view>
					<view class="value">{{orderInfo.remarks}}</view>
				</view>
				<view class="content-space" v-if="orderInfo.state == 'awaiting_payment'"></view>
			</view>
			<!-- 已完成-已评价 -->
			<view class="main-content" v-else-if="orderInfo.state == 'completed' && orderInfo.evaluation_state == 1">
				<view class="content-driver mt-0 flex align-items-center">
					<image class="driver-avatar" :src="orderInfo.driver_info.avatar" mode="aspectFill"></image>
					<view class="driver-info flex-item">
						<view class="info-name text-ellipsis">{{orderInfo.driver_info.name}}</view>
						<view class="info-tag text-ellipsis">接单数量：{{orderInfo.driver_info.acceptance_number}}单</view>
					</view>
					<view class="driver-amount flex align-items-center" @click="openCostInquiry">
						<view class="item-text">合计<text class="text">{{orderInfo.actual_amount}}</text>元</view>
						<image class="item-icon" src="/static/down_arrow.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="content-menu flex justify-content-around">
					<view class="menu-item" @click="toInvoice()">
						<view class="item-icon">
							<image class="icon" src="/static/passenger/invoice.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">开发票</text>
					</view>
					<button class="menu-item clear" open-type="contact">
						<view class="item-icon">
							<image class="icon" src="/static/phone.png" mode="aspectFit"></image>
						</view>
						<text class="item-text">联系客服</text>
					</button>
					<!-- <view class="menu-item">
						<image class="item-icon" src="/static/passenger/share.png" mode="aspectFit"></image>
						<view class="item-text">行程分享</view>
					</view> -->
				</view>
				<view class="content-order">
					<view class="order-group flex align-items-center">
						<view class="group-point" style="background: #242629;"></view>
						<view class="group-text flex-item">{{orderInfo.from_address}}</view>
					</view>
					<view class="order-group flex align-items-center">
						<view class="group-point" :style="{background: themeColor}"></view>
						<view class="group-text flex-item">{{orderInfo.to_address}}</view>
					</view>
					<view class="order-time">{{orderInfo.departure_time}}</view>
				</view>
				<view class="content-input flex align-items-center" v-if="orderInfo.passenger_info && orderInfo.passenger_info.mobile">
					<view class="title">替TA代叫</view>
					<view class="value">
						<text v-if="orderInfo.passenger_info.name">{{orderInfo.passenger_info.name}}</text>
						<text>{{orderInfo.passenger_info.mobile}}</text>
					</view>
				</view>
				<view class="content-input flex align-items-start" v-if="orderInfo.remarks">
					<view class="title">备注信息</view>
					<view class="value">{{orderInfo.remarks}}</view>
				</view>
				<view class="content-evaluate-success flex-column align-items-center" @click="handleEvaluate()">
					<view class="evaluate-title flex flex-center">
						<view class="title">评价成功</view>
						<view class="label">匿名</view>
					</view>
					<view class="evaluate-subtitle">您的评价已收到，感谢您的评价</view>
					<view class="evaluate-btn">查看评价</view>
				</view>
			</view>
			<!-- 已完成-未评价 -->
			<view class="main-content" v-else-if="orderInfo.state == 'completed'">
				<view class="content-tips mt-0">
					<view class="tips-title">行程结束</view>
					<view class="tips-subtitle">已到达目的地，本次行程已结束</view>
				</view>
				<view class="content-driver flex align-items-center">
					<image class="driver-avatar" :src="orderInfo.driver_info.avatar" mode="aspectFill"></image>
					<view class="driver-info flex-item">
						<view class="info-name text-ellipsis">{{orderInfo.driver_info.name}}</view>
						<view class="info-tag text-ellipsis">接单数量：{{orderInfo.driver_info.acceptance_number}}单</view>
					</view>
					<button class="driver-btn clear" open-type="contact">
						<image class="item-icon" src="/static/passenger/service.png" mode="aspectFit"></image>
						<view class="item-text">平台客服</view>
					</button>
				</view>
				<view class="content-amount">
					<view class="amount-header flex flex-between-center">
						<view class="header-title">费用合计</view>
						<view class="header-btn flex flex-center" @click="toInvoice()">
							<image class="icon" src="/static/passenger/invoice.png" mode="aspectFit"></image>
							<text class="text">开发票</text>
						</view>
					</view>
					<view class="amount-info flex-column align-items-center">
						<view class="info-price"><text class="text">{{orderInfo.actual_amount}}</text>元</view>
						<view class="info-btn flex flex-center" @click="openCostInquiry">
							<text class="text">费用疑问</text>
							<image class="icon" src="/static/right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="content-input flex align-items-center" v-if="orderInfo.passenger_info && orderInfo.passenger_info.mobile">
					<view class="title">替TA代叫</view>
					<view class="value">
						<text v-if="orderInfo.passenger_info.name">{{orderInfo.passenger_info.name}}</text>
						<text>{{orderInfo.passenger_info.mobile}}</text>
					</view>
				</view>
				<view class="content-input flex align-items-start" v-if="orderInfo.remarks">
					<view class="title">备注信息</view>
					<view class="value">{{orderInfo.remarks}}</view>
				</view>
				<view class="content-evaluate flex flex-center" @click="handleEvaluate()">
					<view class="evaluate-title">评价本次服务</view>
					<view class="evaluate-tag">匿名</view>
					<image class="evaluate-icon" src="/static/right.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 已取消 -->
			<view class="main-content" v-else-if="orderInfo.state == 'cancelled'">
				<view class="content-tips mt-0" v-if="orderInfo.user_violation_cancel_order_deduct_fees">
					<view class="tips-title">违规取消订单</view>
					<view class="tips-subtitle">已扣除订单部分费用<text class="text">￥{{orderInfo.user_violation_cancel_order_deduct_fees}}</text></view>
				</view>
				<view class="content-order" :class="{'mt-0': !orderInfo.user_violation_cancel_order_deduct_fees}">
					<view class="order-group flex align-items-center">
						<view class="group-point" style="background: #242629;"></view>
						<view class="group-text flex-item">{{orderInfo.from_address}}</view>
					</view>
					<view class="order-group flex align-items-center">
						<view class="group-point" :style="{background: themeColor}"></view>
						<view class="group-text flex-item">{{orderInfo.to_address}}</view>
					</view>
					<view class="order-time">{{orderInfo.departure_time}}</view>
				</view>
				<view class="content-input flex align-items-center" v-if="orderInfo.passenger_info && orderInfo.passenger_info.mobile">
					<view class="title">替TA代叫</view>
					<view class="value">
						<text v-if="orderInfo.passenger_info.name">{{orderInfo.passenger_info.name}}</text>
						<text>{{orderInfo.passenger_info.mobile}}</text>
					</view>
				</view>
				<view class="content-input flex align-items-start" v-if="orderInfo.remarks">
					<view class="title">备注信息</view>
					<view class="value">{{orderInfo.remarks}}</view>
				</view>
				<view class="content-cancel">
					<view class="cancel-title">订单已取消</view>
					<view class="cancel-subtitle">如有疑问请与平台进行联系</view>
				</view>
			</view>
			<!-- IOS安全区域 -->
			<view class="safe-padding"></view>
		</view>
		<view class="container-footer" v-if="orderInfo.state == 'awaiting_payment'">
			<view class="footer-btn" @click="handlePayment()">支付差价{{parseFloat(orderInfo.adjust_amount).toFixed(2)}}元</view>
			<view class="safe-padding"></view>
		</view>
		<!-- 取消订单弹窗 -->
		<cancel-order-modal ref="cancelOrderModal" @onChange="pageChange" @onUpdate="getOrderDetails" v-if="orderInfo.state == 'pending' || orderInfo.state == 'accepted'"></cancel-order-modal>
		<!-- 费用疑问弹窗 -->
		<cost-inquiry-modal ref="costInquiryModal" :show-data="costInquiry" @onChange="pageChange" v-if="orderInfo.state == 'awaiting_payment' || orderInfo.state == 'refunded' || orderInfo.state == 'completed'"></cost-inquiry-modal>
		<!-- 评价订单弹窗 -->
		<evaluate-order-modal ref="evaluateOrderModal" @onChange="pageChange" @onUpdate="getOrderDetails" v-if="orderInfo.state == 'completed'"></evaluate-order-modal>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	import svgData from "@/common/svg.js"
	import cancelOrderModal from "@/pages/passenger/component/modal/cancel-order.vue"
	import costInquiryModal from "@/pages/passenger/component/modal/cost-inquiry.vue"
	import evaluateOrderModal from "@/pages/passenger/component/modal/evaluate-order.vue"
	import recorderUtil from '@/common/recorder.js';
	export default {
		components: {
			cancelOrderModal,
			costInquiryModal,
			evaluateOrderModal,
		},
		data() {
			return {
				// 页面是否阻止滚动
				pageShow: false,
				// 加载完成
				loadEnd: false,
				// 地图标记点
				markersList: [],
				// 上一次标记点数据
				lastMapMarkers: [],
				// 地图显示的标记点
				showMarkers: [],
				// 轨迹点
				polyline: [{
					points: [],
					color: "", //线的颜色
					width: 8, //线的宽度
				}],
				// 地图所有定位点
				mapAllPoints: [],
				// 订单id
				orderId: null,
				// 订单号
				orderNo: null,
				// 订单数据
				orderInfo: {},
				// 免费取消时间
				freeCancelTime: null,
				// 免费取消时间定时器
				freeCancelTimeTimer: null,
				// 等待时间
				waitingTime: "00:00",
				// 等待时间定时器
				waitingTimeTimer: null,
				// 费用疑问
				costInquiry: null,
				// 定时更新订单状态
				updateOrderTimer: null,
				// 是否开启定时更新
				isOpenUpdateOrder: true,
				// 自动定位
				centerMap: 1,
				// 安全中心信息
				securityInfo: null,
				// 是否拒绝录音
				isRefuseRecording: false,
				// 是否启动录音
				isOpenRecorder: false,
				// 录音管理器实例
				recorderManager: null,
				// 当前录音状态 1.正在录音，2.未录音，3.录音暂停
				recorderStatus: 2,
				// 最长录音时间（秒）
				maxRecorderTime: 60,
			}
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
				iconShield: state => {
					return svgData.svgToUrl("shield", state.app.themeColor)
				},
			})
		},
		onLoad(option) {
			if (option.id || option.scene) this.orderId = option.id || option.scene
			else if (option.order_no) this.orderNo = option.order_no
			uni.showLoading({
				title: "加载中"
			})
			this.getOrderDetails(() => {
				uni.hideLoading()
				this.loadEnd = true
				this.$nextTick(() => {
					this.initMap()
				})
			})
		},
		onShow() {
			this.isOpenUpdateOrder = true
			if (this.loadEnd) {
				if (this.orderInfo.state == "in_progress") {
					this.securityInfo = null
					this.getSecurityInfo()
				}
				this.getOrderDetails()
			}
		},
		onPullDownRefresh() {
			this.getOrderDetails(() => {
				uni.stopPullDownRefresh()
			})
		},
		onHide() {
			this.isOpenUpdateOrder = false
			if (this.updateOrderTimer) clearTimeout(this.updateOrderTimer)
		},
		onUnload() {
			this.isOpenUpdateOrder = false
			if (this.updateOrderTimer) clearTimeout(this.updateOrderTimer)
			if (this.freeCancelTimeTimer) clearTimeout(this.freeCancelTimeTimer)
			if (this.waitingTimeTimer) clearTimeout(this.waitingTimeTimer)
			if (this.recorderStatus == 1 || this.recorderStatus == 3) {
				this.recorderManager.endRecord()
			}
		},
		methods: {
			// 改变页面滚动状态
			pageChange(state) {
				this.pageShow = state
			},
			// 初始化地图
			initMap(number = 0) {
				try {
					this._mapContext = uni.createMapContext("map", this);
					this._mapContext.initMarkerCluster({
						enableDefaultStyle: false,
						zoomOnClick: true,
						gridSize: 60,
					});
					this._mapContext.on("markerClusterCreate", () => {});
				} catch (error) {
					if (++number < 10) {
						setTimeout(() => {
							this.initMap(number)
						}, 200);
					}
				}
			},
			// 获取订单详情
			getOrderDetails(fn) {
				var data = {}
				if (this.orderId) data.id = this.orderId
				else if (this.orderNo) data.order_no = this.orderNo
				this.$util.request("passenger.order.details", data).then(res => {
					if (fn) fn()
					if (res.code == 1) {
						if (res.data.id) this.orderId = res.data.id
						this.orderInfo = res.data
						this.polyline = [{
							points: [],
							color: "#00C47A",
							arrowLine: true,
							width: 8,
						}]
						this.markersList = []
						this.mapAllPoints = []
						if (this.updateOrderTimer) clearTimeout(this.updateOrderTimer)
						if (this.orderInfo.state == "pending" || this.orderInfo.state == "accepted" || this.orderInfo.state == "in_progress") {
							if (this.isOpenUpdateOrder) {
								this.updateOrderTimer = setTimeout(() => {
									this.getOrderDetails()
								}, 2500);
							}
						}
						if (this.orderInfo.state == "in_progress" && !this.isRefuseRecording) {
							if (this.securityInfo) {
								this.isOpenRecorder = true
								this.startRecord()
							} else {
								this.getSecurityInfo(() => {
									this.isOpenRecorder = true
									this.startRecord()
								})
							}
						} else if (this.isOpenRecorder) {
							this.isOpenRecorder = false
							if (this.recorderStatus != 2) this.recorderManager.endRecord()
						}
						if (this.orderInfo.state == "pending") {
							this.orderInfo.distance = this.$util.meterToKilometer(res.data.routes[0].distance, 2)
							var pl = this.transformRoute(res.data.routes[0].polyline)
							if (pl.length == 1) pl.push(pl[0])
							this.polyline = [{
								points: pl,
								color: "#00C47A",
								arrowLine: true,
								width: 8,
							}]
							this.markersList = [{
									id: 1,
									latitude: pl[0].latitude,
									longitude: pl[0].longitude,
									iconPath: "/static/location_s.png",
									width: 20,
									height: 39,
									customCallout: {
										anchorX: 0,
										anchorY: -4,
										display: "ALWAYS",
									},
								},
								{
									id: 2,
									latitude: pl[pl.length - 1].latitude,
									longitude: pl[pl.length - 1].longitude,
									iconPath: "/static/location_e.png",
									width: 20,
									height: 39,
									customCallout: {
										anchorX: 0,
										anchorY: -4,
										display: "ALWAYS",
									},
								},
							]
							this.mapAllPoints = pl
						} else if (this.orderInfo.state == "accepted") {
							var pl = this.transformRoute(res.data.routes[0].polyline)
							if (pl.length == 1) pl.push(pl[0])
							if (this.orderInfo.driver_arrive_status == 'not_arrived') {
								this.orderInfo.distance = this.$util.meterToKilometer(res.data.routes[0].distance, 1)
								this.polyline = [{
									points: pl,
									color: "#00C47A",
									arrowLine: true,
									width: 8,
								}]
								this.markersList = [{
										id: 3,
										latitude: pl[pl.length - 1].latitude,
										longitude: pl[pl.length - 1].longitude,
										iconPath: "/static/location_s.png",
										width: 20,
										height: 39,
									},
									{
										id: 4,
										latitude: pl[0].latitude,
										longitude: pl[0].longitude,
										iconPath: "/static/avatar.png",
										width: 32,
										height: 32,
										anchor: { x: .5, y: .5 },
										customCallout: {
											anchorX: 0,
											anchorY: -8,
											display: "ALWAYS",
										},
									},
								]
								this.mapAllPoints = pl
								this.getFreeCancelTime()
							} else {
								this.markersList = [{
										id: 5,
										latitude: pl[pl.length - 1].latitude,
										longitude: pl[pl.length - 1].longitude,
										iconPath: "/static/location_s.png",
										width: 20,
										height: 39,
									},
									{
										id: 6,
										latitude: pl[0].latitude,
										longitude: pl[0].longitude,
										iconPath: "/static/avatar.png",
										width: 32,
										height: 32,
										customCallout: {
											anchorX: 0,
											anchorY: -8,
											display: "ALWAYS",
										},
									},
								]
								this.mapAllPoints = pl
								this.getWaitingTime()
							}
						} else if (this.orderInfo.state == "in_progress") {
							this.orderInfo.distance = this.$util.meterToKilometer(res.data.routes[0].distance, 1)
							var pl = this.transformRoute(res.data.routes[0].polyline)
							if (pl.length == 1) pl.push(pl[0])
							this.polyline = [{
								points: pl,
								color: "#00C47A",
								arrowLine: true,
								width: 8,
							}]
							this.markersList = [{
									id: 7,
									latitude: pl[0].latitude,
									longitude: pl[0].longitude,
									iconPath: "/static/car.png",
									width: 48,
									height: 32,
									customCallout: {
										anchorX: 0,
										anchorY: 0,
										display: "ALWAYS",
									},
								},
								{
									id: 8,
									latitude: pl[pl.length - 1].latitude,
									longitude: pl[pl.length - 1].longitude,
									iconPath: "/static/location_e.png",
									width: 20,
									height: 39,
								},
							]
							this.mapAllPoints = pl
						} else if (this.orderInfo.state == "awaiting_payment" || this.orderInfo.state == "refunded" || this.orderInfo.state == "completed" || this.orderInfo.state == "cancelled") {
							var pl = this.transformRoute(res.data.routes[0].polyline)
							if (pl.length == 1) pl.push(pl[0])
							this.polyline = [{
								points: pl,
								color: "#AEAEAE",
								arrowLine: true,
								width: 8,
							}]
							this.markersList = [{
									id: 9,
									latitude: pl[0].latitude,
									longitude: pl[0].longitude,
									iconPath: "/static/point_s.png",
									width: 20,
									height: 39,
								},
								{
									id: 10,
									latitude: pl[pl.length - 1].latitude,
									longitude: pl[pl.length - 1].longitude,
									iconPath: "/static/point_e.png",
									width: 20,
									height: 39,
								},
							]
							this.mapAllPoints = pl
						}
						this.$nextTick(() => this.setMapMarkers())
						this.$forceUpdate()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					if (fn) fn()
					console.error('获取订单详情 ', error)
				})
			},
			// 转换路线经纬度
			transformRoute(coors) {
				var result = []
				// 腾讯地图
				for (var i = 2; i < coors.length; i++) {
					coors[i] = coors[i - 2] + coors[i] / 1000000
				}
				for (var i = 0; i < coors.length; i += 2) {
					result.push({ latitude: coors[i], longitude: coors[i + 1] })
				}
				return result
			},
			// 设置地图标记点
			setMapMarkers(number = 0) {
				if (this._mapContext) {
					const addMarkers = () => {
						this.showMarkers = []
						this.$nextTick(() => {
							this.showMarkers = this.lastMapMarkers = this.markersList
							this.setMapScale()
						})
					}
					try {
						if (this.lastMapMarkers.length && this.markersList.length) {
							var isUpdate = false
							this.markersList.forEach((item, index) => {
								if (item.id == this.lastMapMarkers[index].id) {
									const distance = this.getDistance(item.latitude, item.longitude, this.lastMapMarkers[index].latitude, this.lastMapMarkers[index].longitude)
									if (isNaN(distance) || Number(distance) < 0 || Number(distance) >= 1) {
										isUpdate = true
									}
								} else {
									isUpdate = true
								}
							});
							if (isUpdate) addMarkers()
						} else {
							addMarkers()
						}
					} catch (error) {
						addMarkers()
					}
				} else {
					if (number < 5) {
						setTimeout(() => {
							this.setMapMarkers(++number)
						}, 200);
					}
				}
			},
			// 设置地图缩放
			setMapScale(number = 0) {
				if (!this.mapAllPoints.length || this.centerMap != 1) return
				const points = this.mapAllPoints
				setTimeout(() => {
					this._mapContext.includePoints({
						points: points,
						padding: [100, 100, 80, 100],
						fail: () => {
							if (number < 10) this.setMapScale(++number)
						},
					})
				}, 200);
			},
			// 根据经纬度计算距离
			getDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137 * 1000;
				s = parseFloat(s).toFixed(2)
				return s;
			},
			// 拖拽地图
			regionchange(obj) {
				if (obj.type == "begin" && this.centerMap === 1) {
					this.centerMap = 2
				} else if (obj.causedBy != "drag" && this.centerMap === 2) {
					this.centerMap = 1
				} else {
					this.centerMap = 0
					setTimeout(() => {
						this.centerMap = 1
					}, 5000);
				}
			},
			// 跳转安全中心
			toSecurity() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/passenger/mine/security/index",
					isToken: true,
				})
			},
			// 取消订单
			handleCancel() {
				if (this.orderInfo.state == 'accepted') {
					const endTime = (this.orderInfo.user_cancel_config?.user_free_cancel_end_time || 0) * 1000
					const nowTime = new Date().getTime()
					const timeDiff = endTime - nowTime;
					const orderData = {
						id: this.orderId,
						state: this.orderInfo.state,
						driver_arrive_status: this.orderInfo.driver_arrive_status,
						user_cancel_config: this.orderInfo.user_cancel_config || {},
						isTimeEnd: timeDiff > 0 ? 2 : 1
					}
					if (this.orderInfo.driver_arrive_status == 'not_arrived' && timeDiff > 0) {
						this.$refs.cancelOrderModal.open(JSON.stringify(orderData))
					} else if (parseInt(this.orderInfo.user_cancel_config?.user_every_day_cancel_count || 0) > 0) {
						uni.showModal({
							content: ` 今天您还有${this.orderInfo.user_cancel_config.user_every_day_cancel_count}次取消机会， \n 是否取消？ `,
							cancelText: "我再想想",
							cancelColor: "#8D929C",
							confirmText: "确认取消",
							confirmColor: this.themeColor,
							success: (res) => {
								if (res.confirm) {
									this.$refs.cancelOrderModal.open(JSON.stringify(orderData))
								}
							}
						})
					} else {
						uni.showModal({
							content: ` 取消本次订单，将扣除${this.orderInfo.user_cancel_config?.user_cancel_order_deduct_fees || 0}元给师傅补偿 `,
							cancelText: "我再想想",
							cancelColor: "#8D929C",
							confirmText: "确认取消",
							confirmColor: this.themeColor,
							success: (res) => {
								if (res.confirm) {
									this.$refs.cancelOrderModal.open(JSON.stringify(orderData))
								}
							}
						})
					}
				} else {
					const orderData = {
						id: this.orderId,
						state: this.orderInfo.state,
					}
					this.$refs.cancelOrderModal.open(JSON.stringify(orderData))
				}
			},
			// 拨打电话
			onContact() {
				this.$util.toPage({
					mode: 6,
					phone: this.orderInfo.driver_info.mobile,
				})
			},
			// 发送消息
			sendMessage() {
				this.$util.toPage({
					mode: 1,
					path: `/pages/passenger/message/details?id=${this.orderId}&name=${this.orderInfo.driver_info.name}`,
					isToken: true,
				})
			},
			// 跳转110报警
			toAlarm() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/passenger/mine/security/alarm",
					isToken: true,
				})
			},
			// 获取免费取消剩余时间
			getFreeCancelTime() {
				try {
					if (!this.orderInfo.user_cancel_config?.user_free_cancel_end_time) {
						this.freeCancelTime = null
						return
					}
					const endTime = this.orderInfo.user_cancel_config.user_free_cancel_end_time * 1000
					const updateTime = () => {
						const nowTime = new Date().getTime()
						const timeDiff = endTime - nowTime;
						if (timeDiff <= 0) {
							this.freeCancelTime = -1
							return
						}
						var hours = Math.floor(timeDiff / 3600000);
						var minutes = Math.floor(timeDiff / 60000) % 60;
						var seconds = Math.floor(timeDiff / 1000) % 60;
						hours >= 0 && hours <= 9 ? (hours = "0" + hours) : ""
						minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : ""
						seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : ""
						if (parseInt(hours) == 0) {
							this.freeCancelTime = `${minutes}:${seconds}`
						} else {
							this.freeCancelTime = `${hours}:${minutes}:${seconds}`
						}
						if (this.freeCancelTimeTimer) clearTimeout(this.freeCancelTimeTimer)
						this.freeCancelTimeTimer = setTimeout(() => {
							updateTime()
						}, 1000);
					}
					if (this.freeCancelTimeTimer) clearTimeout(this.freeCancelTimeTimer)
					updateTime()
				} catch (error) {
					this.freeCancelTime = null
				}
			},
			// 获取等待时间
			getWaitingTime() {
				const startTime = this.orderInfo.waiting_start_time * 1000
				const updateTime = () => {
					const nowTime = new Date().getTime()
					const timeDiff = nowTime - startTime;
					if (timeDiff < 0) {
						this.waitingTime = "00:00:00"
						return
					}
					var hours = Math.floor(timeDiff / 3600000);
					var minutes = Math.floor(timeDiff / 60000) % 60;
					var seconds = Math.floor(timeDiff / 1000) % 60;
					hours >= 0 && hours <= 9 ? (hours = "0" + hours) : ""
					minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : ""
					seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : ""
					if (parseInt(hours) == 0) {
						this.waitingTime = `${minutes}:${seconds}`
					} else if (parseInt(hours) > 999) {
						this.waitingTime = null
					} else {
						this.waitingTime = `${hours}:${minutes}:${seconds}`
					}
					if (this.waitingTimeTimer) clearTimeout(this.waitingTimeTimer)
					this.waitingTimeTimer = setTimeout(() => {
						updateTime()
					}, 1000);
				}
				if (this.waitingTimeTimer) clearTimeout(this.waitingTimeTimer)
				updateTime()
			},
			// 支付差价
			handlePayment() {
				this.$util.request("passenger.order.priceDifference", {
					id: this.orderId,
				}).then(res => {
					if (res.code == 1) {
						let data = res.data.conf
						uni.requestPayment({
							provider: "wxpay",
							...data,
							success: () => {
								uni.showToast({
									icon: "success",
									title: "支付成功",
									mask: true
								})
								this.getOrderDetails()
							},
							fail: () => {
								uni.hideLoading()
								uni.showToast({
									title: '支付已取消',
									icon: 'none'
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('支付差价 ', error)
				})
			},
			// 获取费用疑问
			getCostInquiry(fn) {
				this.$util.request("passenger.order.costInquiry", {
					id: this.orderId,
				}).then(res => {
					if (res.code == 1) {
						this.costInquiry = res.data
						if (fn) fn()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(error => {
					console.error('获取费用疑问 ', error)
				})
			},
			// 打开费用疑问弹窗
			openCostInquiry() {
				if (this.costInquiry) {
					this.$refs.costInquiryModal.open()
				} else {
					uni.showLoading({
						title: "加载中",
						mask: true
					})
					this.getCostInquiry(() => {
						uni.hideLoading()
						this.$refs.costInquiryModal.open()
					})
				}
			},
			// 跳转开发票
			toInvoice() {
				this.$util.toPage({
					mode: 1,
					path: "/pages/passenger/mine/invoice/order",
					isToken: true,
				})
			},
			// 评价订单
			handleEvaluate() {
				this.$refs.evaluateOrderModal.open({
					id: this.orderId,
					driverInfo: this.orderInfo.driver_info,
					state: this.orderInfo.evaluation_state
				})
			},
			// 获取安全中心信息
			getSecurityInfo(fn) {
				this.$util.request("passenger.security").then(res => {
					if (res.code == 1) {
						this.securityInfo = res.data || {}
						if (fn) fn()
					} else {
						this.securityInfo = {}
					}
				}).catch(error => {
					this.securityInfo = {}
					console.error('获取安全中心信息 ', error)
				})
			},
			// 初始化录音
			initRecorder() {
				this.recorderManager = new recorderUtil(this.maxRecorderTime);
				this.recorderManager.onMessage(res => {
					this.recorderStatus = res.status
					if (res.type == "permission_denied") {
						this.isRefuseRecording = true
						uni.showModal({
							content: ' 检测到您没打开麦克风权限， \n 是否前往设置？ ',
							confirmText: "确认",
							confirmColor: this.themeColor,
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									this.isRefuseRecording = false
									uni.openSetting()
								}
							}
						})
					} else if (res.type == "start") {
						this.isOpenRecorder = true
					} else if (res.type == "stop") {
						this.startRecord()
						this.uploadAudio(res)
					}
				});
			},
			// 开始录音
			startRecord() {
				if (this.isOpenRecorder && this.securityInfo.sound_recording_status == 1 && this.securityInfo.user_sound_recording_status == 1) {
					if (!this.recorderManager) this.initRecorder()
					if (this.recorderStatus == 2) {
						this.recorderManager.startRecord()
					} else if (this.recorderStatus == 3) {
						this.recorderManager.resumeRecord()
					}
				} else {
					if (this.recorderStatus != 2) {
						this.recorderManager.endRecord()
					}
				}
			},
			// 上传录音文件
			uploadAudio(audio) {
				this.$util.uploadFile(audio.path).then(result => {
					if (result.code == 1) {
						this.$util.request("main.recording.submit", {
							order_id: this.orderId,
							url: result.data.url,
							start_time: audio.start_time,
							end_time: audio.end_time,
							source: 1,
						})
					}
				}).catch(error => {
					console.error('上传录音 ', error)
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 0;
	}

	.container {
		min-height: 100vh;
		position: relative;

		.mt-0 {
			margin-top: 0 !important;
		}

		.container-map {
			position: sticky;
			top: 0;
			width: 100%;
			height: 100%;
			min-height: 500rpx;

			.map-box {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;

				.map-callout {
					width: 100vw;
					display: flex;
					flex-direction: row;
					justify-content: center;
					position: relative;
				}

				.callout-address {
					border-radius: 8rpx;
					background: #FFF;
					box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.25);
					padding: 14rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					max-width: 160px;

					.address-name {
						color: #242629;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
					}
				}

				.callout-box {
					border-radius: 16rpx;
					background: #FFF;
					min-width: 160px;

					.box-title {
						color: #000;
						text-align: center;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						padding: 16rpx 16rpx 0;
					}

					.box-subtitle {
						margin-top: 12rpx;
						color: var(--theme-color);
						text-align: center;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						padding: 0 16rpx 16rpx;
					}
				}

				.callout-distance {
					border-radius: 16rpx;
					background: #FFF;
					padding: 16rpx 30rpx;

					.distance-text {
						color: #000;
						text-align: center;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
					}
				}
			}

			.map-operate {
				position: absolute;
				bottom: 64rpx;
				left: 32rpx;
				background: #FFF;
				border-radius: 32rpx;
				overflow: hidden;
				width: 196rpx;

				.background {
					background: var(--theme-color);
					opacity: .05;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}

				.icon {
					position: relative;
					z-index: 1;
					width: 64rpx;
					height: 64rpx;
					background-size: 64rpx;
				}

				.text {
					position: relative;
					z-index: 1;
					color: var(--theme-color);
					font-size: 24rpx;
					font-weight: 600;
					line-height: 34rpx;
					margin-left: 16rpx;
				}
			}
		}

		.container-main {
			position: relative;
			z-index: 9;
			margin-top: -32rpx;
			border-radius: 32rpx 32rpx 0 0;
			background: #F7F7F7;

			.main-content {
				padding: 32rpx;

				.content-column {
					margin-top: 32rpx;
					border-radius: 32rpx;
					background: #FFF;
					padding: 32rpx;

					.column-info {
						.info-title {
							color: #242629;
							font-size: 32rpx;
							font-weight: 600;
							line-height: 44rpx;
						}

						.info-subtitle {
							margin-top: 8rpx;
							color: #8D929C;
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}
					}

					.column-btn {
						color: var(--theme-color);
						font-size: 24rpx;
						font-weight: 600;
						width: 128rpx;
						height: 48rpx;
						border: 2rpx solid var(--theme-color);
						border-radius: 24rpx;
						margin-left: 24rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.content-card {
					margin-top: 32rpx;
					border-radius: 32rpx;
					background: #FFF;
					padding: 48rpx;

					.card-info {
						.info-name {
							color: #242629;
							font-size: 40rpx;
							font-weight: 600;
							line-height: 56rpx;
						}

						.info-tag {
							margin-top: 16rpx;
							color: #8D929C;
							font-size: 24rpx;
							font-weight: 600;
							line-height: 34rpx;
						}
					}

					.card-avatar {
						margin-left: 32rpx;
						width: 108rpx;
						height: 108rpx;
						border-radius: 50%;
					}
				}

				.content-tips {
					margin-top: 32rpx;

					.tips-title {
						color: #242629;
						font-size: 32rpx;
						font-weight: 600;
						line-height: 44rpx;
					}

					.tips-subtitle {
						margin-top: 8rpx;
						color: #8D929C;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;

						.text {
							color: var(--theme-color);
						}
					}

					.tips-time {
						margin-left: 24rpx;

						.time-text {
							font-size: 28rpx;
							font-weight: 400;
							line-height: 40rpx;
						}

						.time-value {
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
							margin-left: 16rpx;
						}
					}
				}

				.content-menu {
					margin-top: 32rpx;

					.menu-item {
						flex: 1;
						padding: 0 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.item-icon {
							position: relative;
							padding: 6rpx;

							.icon {
								width: 32rpx;
								height: 32rpx;
							}

							.point {
								position: absolute;
								top: 0;
								right: 0;
								border-radius: 16rpx;
								width: 16rpx;
								height: 16rpx;
								background: #DE2828;
							}
						}

						.item-text {
							margin-top: 8rpx;
							color: #242629;
							font-size: 24rpx;
							font-weight: 600;
							line-height: 34rpx;
						}

						&.alarm .item-text {
							color: #DE2828;
						}
					}
				}

				.content-driver {
					margin-top: 32rpx;
					border-radius: 32rpx;
					background: #FFF;
					padding: 32rpx;

					.driver-avatar {
						margin-right: 16rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.driver-info {
						.info-name {
							color: #242629;
							font-size: 32rpx;
							font-weight: 600;
							line-height: 44rpx;
						}

						.info-tag {
							margin-top: 2rpx;
							color: #8D929C;
							font-size: 24rpx;
							font-weight: 600;
							line-height: 34rpx;
						}
					}

					.driver-price {
						color: #242629;
						font-size: 24rpx;
						line-height: 56rpx;
						margin-left: 16rpx;

						.text {
							font-size: 40rpx;
							font-weight: 600;
						}
					}

					.driver-btn {
						padding: 16rpx 24rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.item-icon {
							width: 32rpx;
							height: 32rpx;
						}

						.item-text {
							margin-top: 8rpx;
							color: #242629;
							font-size: 24rpx;
							font-weight: 600;
							line-height: 34rpx;
						}

						&.alarm .item-text {
							color: #DE2828;
						}
					}

					.driver-amount {
						.item-text {
							color: #242629;
							font-size: 24rpx;
							line-height: 56rpx;

							.text {
								font-size: 40rpx;
								font-weight: 600;
							}
						}

						.item-icon {
							margin-left: 8rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
				}

				.content-order {
					padding: 32rpx;
					border-radius: 32rpx;
					background: #FFF;
					margin-top: 32rpx;

					.order-group {
						margin-top: 32rpx;

						&:first-child {
							margin-top: 0;
						}

						.group-point {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
						}

						.group-text {
							margin-left: 16rpx;
							color: #242629;
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}
					}

					.order-time {
						color: #242629;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						margin-top: 32rpx;
					}
				}

				.content-input {
					margin-top: 32rpx;
					border-radius: 32rpx;
					background: #FFF;
					padding: 32rpx;

					.title {
						color: #242629;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
					}

					.value {
						flex: 1;
						color: #242629;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
						margin-left: 32rpx;
						text-align: right;
					}
				}

				.content-amount {
					padding: 32rpx 32rpx 48rpx;
					border-radius: 32rpx;
					background: #FFF;
					margin-top: 32rpx;

					.amount-header {
						.header-title {
							color: #000;
							font-size: 28rpx;
							line-height: 40rpx;
						}

						.header-btn {
							display: flex;
							padding: 6rpx 24rpx;
							border-radius: 24rpx;
							border: 1px solid #EBEBEB;
							background: #FFF;

							.icon {
								width: 24rpx;
								height: 24rpx;
							}

							.text {
								color: #242629;
								font-size: 24rpx;
								font-weight: 600;
								line-height: 34rpx;
								margin-left: 8rpx;
							}
						}
					}

					.amount-info {
						margin-top: 48rpx;

						.info-price {
							color: #242629;
							font-size: 24rpx;
							line-height: 56rpx;

							.text {
								font-size: 40rpx;
								font-weight: 600;
							}
						}

						.info-btn {
							margin-top: 8rpx;

							.text {
								color: #8D929C;
								font-size: 24rpx;
								font-weight: 600;
								line-height: 34rpx;
							}

							.icon {
								margin-left: 8rpx;
								width: 24rpx;
								height: 24rpx;
							}
						}
					}
				}

				.content-evaluate {
					padding: 32rpx;
					border-radius: 32rpx;
					background: #FFF;
					margin-top: 32rpx;

					.evaluate-title {
						color: var(--theme-color);
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
					}

					.evaluate-tag {
						margin-left: 16rpx;
						color: #FFF;
						font-size: 20rpx;
						font-weight: 600;
						line-height: 40rpx;
						padding: 0 8rpx;
						border-radius: 8rpx;
						background: linear-gradient(90deg, var(--theme-color) 0%, #FFF 150%);
					}

					.evaluate-icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 16rpx;
					}
				}

				.content-evaluate-success {
					padding: 32rpx;
					border-radius: 32rpx;
					background: linear-gradient(90deg, #FFF 0%, var(--theme-color) 250%);
					margin-top: 32rpx;

					.evaluate-title {
						.title {
							color: var(--theme-color);
							font-size: 28rpx;
							font-weight: 600;
							line-height: 40rpx;
						}

						.label {
							margin-left: 16rpx;
							color: #FFF;
							font-size: 20rpx;
							font-weight: 600;
							line-height: 40rpx;
							padding: 0 8rpx;
							border-radius: 8rpx;
							background: linear-gradient(90deg, var(--theme-color) 0%, #FFF 150%);
						}
					}

					.evaluate-subtitle {
						margin-top: 16rpx;
						color: #8D929C;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
					}

					.evaluate-btn {
						color: var(--theme-color);
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 600;
						line-height: 34rpx;
						padding: 6rpx 14rpx;
						border-radius: 24rpx;
						border: 1px solid var(--theme-color);
					}
				}

				.content-cancel {
					padding: 32rpx;
					border-radius: 32rpx;
					background: #FFF;
					margin-top: 32rpx;

					.cancel-title {
						color: #242629;
						font-size: 32rpx;
						font-weight: 600;
						line-height: 44rpx;
					}

					.cancel-subtitle {
						margin-top: 32rpx;
						color: #8D929C;
						font-size: 24rpx;
						line-height: 34rpx;
					}
				}

				.content-space {
					width: 100%;
					height: 128rpx;
				}
			}
		}

		.container-footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 96;
			padding: 16rpx 32rpx 16rpx 38rpx;
			background: #FFF;

			.footer-btn {
				width: 100%;
				margin-left: 16rpx;
				color: #FFF;
				text-align: center;
				font-size: 28rpx;
				font-weight: 600;
				line-height: 40rpx;
				padding: 28rpx;
				border-radius: 32rpx;
				background: var(--theme-color);

				&:first-child {
					margin-left: 0;
				}
			}
		}
	}
</style>